<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta content="yes" name="apple-touch-fullscreen">
		<style type=text/css>

			/*  */

		body
		{
			background-color: #c4c4c4;
			font-family: "Microsoft YaHei", "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
			/* -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,   Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" */
  		font-size: 10.5pt;
      margin: 0px;
		}
		.main
		{
			max-width:720px;
			margin: 0 auto;
			height: 100%;
			padding-top: 54px; /* header */
			padding-bottom: 32px; /* footer */
			background-color: #ebebeb;
		}
		.header
		{
			position: fixed;
			top:0;
			max-width:720px;
			width: 100%;
			height: 48px;
			background-color: #f6f6f6;
			z-index: 2147483600;
		}
		.footer
		{
			position: fixed;
			bottom: 0;
			max-width:720px;
			width: 100%;
			height: 32px;
			line-height: 32px;
			background-color: #f6f6f6;
			z-index: 2147483600;
		}
		.pager
		{
			margin-left: 0.5em;
			margin-right: 0.5em;
		}
		.sname
		{
			padding-left: 12px;
			vertical-align: middle;
			height: 48px;
			line-height: 48px;
			font-weight: bold;
		}
		.msgfilter
		{
			float:right;
			height: 48px;
			line-height: 48px;
			padding-right: 8px;
		}
		.filter-btn
		{
			vertical-align: middle;
		}
		span.filter-btn
		{
			cursor: hand;
		}
		span.filter-btn:hover
		{
			color: blue;
		}
		
		div.msg
		{
			page-break-inside: avoid;
			break-inside: avoid-page;
		}

		.msgs
		{
			width: 100%;
			height: 100%;
		}
		span.msg-text pre
		{
			white-space: pre-wrap;       /* Since CSS 2.1 */
			white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
			white-space: -pre-wrap;      /* Opera 4-6 */
			white-space: -o-pre-wrap;    /* Opera 7 */
			word-wrap: break-word;       /* Internet Explorer 5.5+ */
			margin: 0px 0px;
		}
	  	.chat.left, .media.left
	  	{
			clear:both;
			overflow: auto;
			margin:0 auto;
			padding: 8px 8px 0px 8px;
	  	}
		.chat.left div.avatar-box,
		.media.left div.avatar-box
		{
			float: left;
		}
		.chat.left div.avatar-box
		{
			/*padding-top: 6px;*/
		}
		.chat.left div.nt-box,
		.media.left div.nt-box
		{
			margin: 0 50px 2px 50px;
			padding: 0px;
			color: #848484;
			font-size: 80%;
			text-align: left;
		}
		.chat.left div.content-box
		{
			position: relative;
			background-color: white;
			/*float: left;*/
			margin: 0 50px 8px 50px;
			padding: 8px 8px 8px 8px;
			border-radius:4px;
		}
		.media.left div.content-box
		{
			/*float: left;*/
			margin: 0 50px 8px 50px;
			padding: 8px 8px 8px 8px;
    	}
	    div.content-box
	    {
	      width:fit-content;
	      width:-webkit-fit-content;
	      width:-moz-fit-content;
	    }
		.chat.left.channels .content-box, .chat.right.channels .content-box
		{
			width:240px;
		}
		.refermsg
		{
			font-size: 90%;
		}
		
		.chat.right, .media.right
		{
			clear:both;
			overflow: auto;
			max-width: 670px;
			margin: 0 auto;
			background-color: #ebebeb;
			padding: 8px 8px 0px 58px;
		}
		.chat.right div.avatar-box,
		.media.right div.avatar-box
		{
			float: right;
		}
		.chat.right div.nt-box,
		.media.right div.nt-box
		{
			margin: 0px 50px 2px 50px;
			padding: 0px;
			color: #848484;
			font-size: 80%;
			text-align: right;
		}
		.chat.right div.content-box
		{
      		position: relative;
			background-color: #b2e281;
			margin: 0px 50px 8px auto;
			padding: 8px 8px 8px 8px;
			border-radius: 4px;
		}
		.media.right div.content-box
		{
			float: right;
			margin: 0px 0px 8px 50px;
			padding: 8px 8px 8px 8px;
		}
		
		.name.right
		{
			display: none;
		}
		img.wxemoji
		{
			border: 0;
			width: 20px;
		    height: 20px;
		    display: inline;
		    display: -moz-inline-stack;
		    display: inline-block;
		    vertical-align: top;
		    /*zoom: 1;*/
		}
		
		img.avatar
		{
			width: 40px;
			height: 40px;
			border-radius: 4px;
		}
		
		.triangle
		{
			height: 0px;
			width: 0px;
			border-width: 6px;
			border-style: solid;
			position: relative;
		}
		.chat.left .triangle
		{
			position: absolute;
			border-color: transparent white transparent transparent;
			left: -12px;
			top: 6px;
		}
		.chat.right .triangle
		{
			position: absolute;
			border-color: transparent transparent transparent #b2e281;
			right: -12px;
			top: 6px;
		}
		
		.chat-notice
		{
			clear: both;
			font-size: 80%;
			text-align: center;
			margin-top: 15px;
			margin-bottom: 15px;
			margin:0 auto;
			padding: 0px 8px;
    	}
    	.chat-notice .content-box
		{
			width: 80%;
			margin:0 auto;
		}
		.chat-notice.fmsgtag .content-box
		{
			background-color: #008080;
			border-radius: 4px;
			font-size: 100%;
			padding: 5px 10px;
			color: white;
		}
		audio
		{
			max-width: 220px;
		}
		video
		{
			max-width: 240px;
			border-radius: 4px;
		}
		.image
		{
			width:90px;
			border-radius:4px;
			max-width: 360px;
			max-height: 240px;
			min-width: 120px;
			min-height: 24px;
		}
		img
		{
			image-orientation: from-image;
		}
		img[src=""]
		{
			display: none;
		}
		img.app-icon
		{
			width: 24px;
			height: 24px;
			vertical-align:middle;
			border-radius: 2px;
		}
		img.transfer-icon
		{
			width: 16px;
			height: 16px;
			vertical-align:middle;
			border-radius: 2px;
		}
		img.channel-poster
		{
			object-fit: cover;
			width: 240px;
			height: 240px;
		}
		.raw-img .image:hover, .channel-poster:hover
		{
			cursor: -webkit-zoom-in;
   			cursor: zoom-in;
		  	/* transform: scale(5); */
		}
		img.card-avatar
		{
			width: 42px;
			height: 42px;
			vertical-align:middle;
		}
		div.card-name
		{
			display: inline-flex;
			align-items:center;
		}
		div.card-name span
		{
			margin-left: 8px;
		}
		span.channel-title
		{
			margin-left: 2px;
		}
		span.app-name:empty
		{
			display: none;
		}
		div.card-type
		{
			border-top: 1px dotted #dedede;
			margin: 10px 2px 2px 2px;
			padding: 4 12px 8px 0px;
			line-height: 1.6;
		}
		.contact-card .card-avatar
		{
			border-radius: 4px;
		}
		.channel-card .card-avatar
		{
			border-radius: 21px; /*making circle*/
		}
		span.channel-title
		{
			overflow: hidden;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			white-space: nowrap;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			word-break: break-all;
			width: 230px;
			display:block;
		}
		.appinfo
		{
			/*padding-top: 12px;*/
		}
		.app-name
		{
			padding-left: 4px;
			color: #999;
			font-size: 80%;
		}
		
		.dont-break-out
		{
			overflow-wrap: break-word;
			word-wrap: break-word;
			
			-ms-word-break: break-all;
			/*word-break: break-all;*/
			word-break: break-word;
			-ms-hyphens: auto;
			-moz-hyphens: auto;
			-webkit-hyphens: auto;
			hyphens: auto;
		}

		.img-popup
		{
			background: rgba(0,0,0,.4);
			
			width: 100%;
			height: 100%;
			position: fixed;
			text-align: center;
			top: 0;
			left: 0;
			z-index: 2147483647;	/* top-most */
		}
		.img-popup .img
		{
			cursor: pointer;
			display: inline-block;
			vertical-align: middle;
			display: inline-block;
			position: absolute;
			box-shadow: 10px 10px 60px #555;
			border-radius: 8px;
			max-width: 90%; 
			max-height: 90%;
			margin: auto;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}

		.voicebox
		{
			background-color: white;
			max-width: 300px;
			min-width: 48px;
			height: 30px;
			border-radius: 4px;
			display: inline-flex;
			border: 1.5px solid #ccc;
			padding: 2px;
		}
		.right .voicebox
		{
			background-color: #b2e281;
			flex-direction: row-reverse;
		}
		.voiceimg
		{
			width: 25px;
			height: 26px;
			background-repeat: no-repeat;
			background-position: -50px 0;
			background-image: url('');
		}
		.voicetime
		{
			height: 26px;
			line-height: 26px;
			padding-left: 4px;
			padding-right: 8px;
		}
		.right .voiceimg
		{
			-moz-transform: scaleX(-1);
    		-o-transform: scaleX(-1);
    		-webkit-transform: scaleX(-1);
    		transform: scaleX(-1);
				-ms-filter: "FlipH";
    		filter: FlipH;
		}

		.voiceplaying
		{
			animation:voiceplaying 1.5s steps(1, end) infinite;
		}

		@keyframes voiceplaying
		{
			0%{background-position: 0 0 }
			25%{ background-position:-25px 0;}
			75%{ background-position: -50px 0; }
			100%{ background-position: -50px 0; }
		}
		
		@media print
		{
			body
			{
				background-color: white;
			}
			.header
			{
				position: absolute;
			}
			.chat.left div.content-box
			{
				margin: 0 50px 4px 50px;
			}
			.chat.right div.content-box
			{
				margin: 0px 50px 4px auto;
			}
		}
		</style>
		<title>%%DISPLAYNAME%% - %%ML:WeChat Chat History%%</title>
		<script language="javascript">

			function getQueryParam(param, url)
			{
  				// this is an expression to get query strings
  				var regexp = new RegExp('[?&]' + param + '=([^&#]*)', 'i' );
  				var qString = regexp.exec(url);
  				return qString ? qString[1] : null;
			}

			function showImagePopup(e)
			{
				var srcElement = e.target;
				var imgUrl = srcElement.getAttribute("rawUrl");
				if (imgUrl == null)
				{
					return false;
				}
	
				var fragment = document.createDocumentFragment();
				var div = document.createElement('div');
				div.className = "img-popup";
				div.onclick = function(event) {
					document.body.removeChild(div);
				};
				fragment.appendChild(div);
				var img = document.createElement('img');
				img.className = "img";
				img.src = imgUrl;
				div.appendChild(img);
				document.body.appendChild(fragment);
			}
	
			function showElements(msgType)
			{
				var kwElement = document.getElementById("filter-keyword");
				if (null != kwElement) kwElement.value = "";
	
				window.msgFilter = {'filterType': 'msgType', 'msgType': msgType};
	
				var msgElements = document.querySelectorAll('div.msg');
				if (null == msgElements || msgElements.length == 0)
				{
					return;
				}
	
				document.body.style.cursor = 'wait';
				var visibleMsgs = 0;
				for (idx = 0; idx < msgElements.length; idx++)
				{
					if (filterMsg(msgElements[idx]))
					{
						visibleMsgs++;
					}
				}
	
				if (visibleMsgs < window.sizeOfMsgPage && (typeof window.wechatMsgsIndexes !== 'undefined') && (window.wechatMsgsIndexes.length > 0))
				{
					window.numberOfMsgsToLoad = window.sizeOfMsgPage - visibleMsgs;
					loadMsgsForNextPage();
				}
				document.body.style.cursor = 'default';
			}
	
			function filterMsg(divMsg)
			{
				if ((typeof window.msgFilter === 'undefined') || (window.msgFilter == null) || (typeof window.msgFilter.filterType === 'undefined'))
				{
					divMsg.style.display = "block";
					return true;
				}
				if (window.msgFilter.filterType == 'search')
				{
					if ((typeof window.msgFilter.keyword === 'undefined') || (window.msgFilter.keyword == null) || (window.msgFilter.keyword.length == 0))
					{
						divMsg.style.display = "block";
						return true;
					}
					var elementClasses = ['span.dspname', 'span.msg-text'];
					var matched = false;
					for (idx1 = 0; idx1 < elementClasses.length; idx1++)
					{
						var elements = divMsg.querySelectorAll(elementClasses[idx1]);
						if (null == elements || elements.length == 0) continue;
						
						for (idx2 = 0; idx2 < elements.length; idx2++)
						{
							if (null != elements[idx2].innerText && elements[idx2].innerText.toLowerCase().indexOf(window.msgFilter.keyword) != -1)
							{
								matched = true;
								break;
							}
						}
						if (matched) break;
					}
					divMsg.style.display = matched ? "block" : "none";
					return matched;
				}
				else if (window.msgFilter.filterType == 'msgType')
				{
					var matched = (typeof window.msgFilter.msgType === 'undefined') || (window.msgFilter.msgType == null) || (divMsg.getAttribute("msgType") == window.msgFilter.msgType);
					divMsg.style.display = matched ? "block" : "none";
					return matched;
				}
	
				divMsg.style.display = "block";
				return true;
			}
	
			function searchElements(e)
			{
				var keyCode = e.keyCode || e.which || 0;
				if(keyCode !== 13)
				{
					return false;
				}
	
				var msgElements = document.querySelectorAll('div.msg');
				if (null == msgElements || msgElements.length == 0)
				{
					return false;;
				}
	
				var keyword = e.target.value == null ? "" : e.target.value.toLowerCase();
				window.msgFilter = {'filterType': 'search', 'keyword': keyword};
				var elementClasses = ['span.dspname', 'span.msg-text'];
				var visibleMsgs = 0;
				document.body.style.cursor = 'wait';
				for (idx = 0; idx < msgElements.length; idx++)
				{
					if (filterMsg(msgElements[idx]))
					{
						visibleMsgs++;
					}
				}
				if (visibleMsgs < window.sizeOfMsgPage && (typeof window.wechatMsgsIndexes !== 'undefined') && (window.wechatMsgsIndexes.length > 0))
				{
					window.loadingMoreMsgs = true;
					window.numberOfMsgsToLoad = window.sizeOfMsgPage - visibleMsgs;
					loadMsgsForNextPage();
				}
				document.body.style.cursor = 'default';
				
				return false;
			}
	
			function showAllMsgs(e)
			{
				showElements(null);
			}
			function showImageMsgs(e)
			{
				showElements("image");
			}
			function showVideoMsgs(e)
			{
				showElements("video");
			}

			function loadMsgsForNextPage()
			{
				if ((typeof window.wechatMsgsIndexes === 'undefined'))
				{
					return 0;
				}
				if ((typeof window.moreWechatMsgs === 'undefined'))
				{
					window.moreWechatMsgs = [];
				}
				
				var visibleMsgs = 0;
				if (window.moreWechatMsgs.length > 0)
				{
					var fragment = document.createDocumentFragment();
					var div = document.createElement('div');
					fragment.appendChild(div);
					
					while (window.moreWechatMsgs.length > 0)
					{
						div.innerHTML = window.moreWechatMsgs.shift();
						if (div.children.length > 0)
						{
							var msgDiv = div.children[0];
							fragment.appendChild(msgDiv);
							
							if (filterMsg(msgDiv))
							{
								visibleMsgs++;
							}
						}
						
					}

					fragment.removeChild(div);
					var containerDiv = document.getElementById('msgs-div');
					if (null != containerDiv)
					{
						containerDiv.appendChild(fragment);
					}
				}
				
				window.numberOfMsgsToLoad -= visibleMsgs;
				if ((window.numberOfMsgsToLoad > 0) && window.wechatMsgsIndexes.length > 0)
				{
					// Load next page
					console.log(window.wechatMsgsIndexes);
					var nextPage = window.wechatMsgsIndexes.shift();

					var script   = document.createElement("script");
					script.type  = "text/javascript";
					script.src   = "%%DATA_PATH%%/msg-" + nextPage + ".js";
					document.body.appendChild(script);
				}
				else
				{
					window.loadingMoreMsgs = false;
				}

				return true;
			}

			function checkScrollDirectionIsUp(e)
			{
				if (e.wheelDelta)
				{
					return e.wheelDelta > 0;
				}
				return e.deltaY < 0;
			}

			function playbackEnded(e)
			{
				var playingMsgId = e.target.getAttribute("playingMsgId");
				if (playingMsgId != null)
				{
					var voiceDiv = document.getElementById("voiceimg-" + playingMsgId);
					if (null != voiceDiv)
					{
						voiceDiv.classList.remove("voiceplaying");
					}
					e.target.removeAttribute("playingMsgId");
				}
			}

			function playAudio(src, msgId)
			{
				// Stop previous
				var audioPlayer = document.getElementById("audioPlayer");
				if (null == audioPlayer)
				{
					var divFooter = document.getElementById("footer");
					// Create audio player
					audioPlayer = document.createElement('audio');
					audioPlayer.id = "audioPlayer";
					audioPlayer.type = 'audio/mpeg';
					audioPlayer.hidden = true;
					if (null != divFooter)
					{
						divFooter.appendChild(audioPlayer);
					}

					audioPlayer.onpause = playbackEnded;
					audioPlayer.onended = playbackEnded;

					audioPlayer.onaudioprocess = function(e)
					{
						console.log("onaudioprocess: " + e.target.currentSrc);
					};

					audioPlayer.onloadeddata = function(e)
					{
						console.log("onloadeddata: " + e.target.currentSrc);
					};

					
				}

				audioPlayer.pause();
				
				var playingMsgId = audioPlayer.getAttribute("playingMsgId");
				if (playingMsgId != null)
				{
					var voiceDiv = document.getElementById("voiceimg-" + playingMsgId);
					if (null != voiceDiv)
					{
						voiceDiv.classList.remove("voiceplaying");
					}
					audioPlayer.removeAttribute("playingMsgId");
				}

				if (msgId != playingMsgId)
				{
					console.log("Will play " + msgId);
					// Play new one
					audioPlayer.setAttribute("playingMsgId", msgId);
					var audioSrc = src.getAttribute("audio");
					if (null != audioSrc)
					{
						audioPlayer.src = audioSrc;
						audioPlayer.load();
						audioPlayer.play();
					}

					var voiceDiv = document.getElementById("voiceimg-" + msgId);
					if (null != voiceDiv)
					{
						voiceDiv.classList.add("voiceplaying");
					}
				}
			}
			
			function playVideo(src, msgId)
			{
				// Stop previous
				var videoPlayer = document.getElementById("videoPlayer");
				if (null == videoPlayer)
				{
					var divFooter = document.getElementById("footer");
					// Create video player
					videoPlayer = document.createElement('video');
					videoPlayer.id = "videoPlayer";
					videoPlayer.type = 'video/mpeg';
					videoPlayer.hidden = true;
					if (null != divFooter)
					{
						divFooter.appendChild(videoPlayer);
					}

					videoPlayer.onpause = playbackEnded;
					videoPlayer.onended = playbackEnded;

					videoPlayer.onvideoprocess = function(e)
					{
						console.log("onvideoprocess: " + e.target.currentSrc);
					};

					videoPlayer.onloadeddata = function(e)
					{
						console.log("onloadeddata: " + e.target.currentSrc);
					};

					
				}

				videoPlayer.pause();
				
				var playingMsgId = videoPlayer.getAttribute("playingMsgId");
				if (playingMsgId != null)
				{
					var voiceDiv = document.getElementById("voiceimg-" + playingMsgId);
					if (null != voiceDiv)
					{
						voiceDiv.classList.remove("voiceplaying");
					}
					videoPlayer.removeAttribute("playingMsgId");
				}

				if (msgId != playingMsgId)
				{
					console.log("Will play " + msgId);
					// Play new one
					videoPlayer.setAttribute("playingMsgId", msgId);
					var videoSrc = src.getAttribute("video");
					if (null != videoSrc)
					{
						videoPlayer.src = videoSrc;
						videoPlayer.load();
						videoPlayer.play();
					}

					var voiceDiv = document.getElementById("voiceimg-" + msgId);
					if (null != voiceDiv)
					{
						voiceDiv.classList.add("voiceplaying");
					}
				}
			}

			function initPageData(pageData) {
  			if (typeof pageData !== 'undefined') {
  				window.pageData = pageData;
  			} else {
  				window.pageData = [];
  			}
  		}

		function initWechatPage() {
			
			window.pagerType = "%%PAGER_TYPE%%";

			initPageData(%%PAGE_DATA%%);	// array of {'numnberOfMsgs', 'year', 'month', 'page', }

			var currentPage = getQueryParam('p', document.location.href);
			if (currentPage == null) {
				currentPage = 0;
			} else {
				currentPage = parseInt(currentPage) - 1;
				if (currentPage >= window.pageData.length) {
					currentPage = window.pageData.length - 1;
				}
				if (currentPage < 0) {
					currentPage = 0;
				}
			}

			window.loadingMoreMsgs = false;
			window.sizeOfMsgPage = parseInt('%%SIZE_OF_PAGE%%') || 100;
			var numberOfMsgs = parseInt('%%NUMBER_OF_MSGS%%') || 0;
			var numberOfPages = parseInt('%%NUMBER_OF_PAGES%%') || 0;
			var asyncLoadingType = "%%ASYNC_LOADING_TYPE%%";

			if (asyncLoadingType != "pager" && numberOfPages == 0)
			{
				return;
			}
			window.wechatMsgsIndexes = [];
			window.numberOfMsgsToLoad = 0;

			if (asyncLoadingType == "pager")
			{
				window.wechatMsgsIndexes.push(window.pageData[currentPage].page);
				window.numberOfMsgsToLoad = window.pageData[currentPage].numnberOfMsgs;
			}
			else
			{
				for (var idx = 1; idx <= numberOfPages; idx++)
				{
					window.wechatMsgsIndexes.push(idx);
				}
			}

			if (asyncLoadingType == "pager")
			{
				loadMsgsForNextPage();

				console.log("currentPage=" + currentPage );

				var minIdx = Math.max(0, currentPage - 5);
				var maxIdx = Math.min(window.pageData.length - 1, currentPage + 5);

				var pagerContainer = document.getElementById('pager');
				var prevYear = '';

				// show 10 pages
				for (var idx = minIdx; idx <= maxIdx; idx++) {
					if (window.pagerType == "1") {
						// 
						var pageItem = window.pageData[idx];
						if (idx == currentPage) {
							var spn = document.createElement('span');
							spn.className = "pager";
							spn.innerText = idx + 1;
							pagerContainer.appendChild(spn);
						} else {
							var lnk = document.createElement('a');
							lnk.className = "pager";
							lnk.innerText = idx + 1;
							if (0 == idx) {
								lnk.href = "index.html";
							} else {
								lnk.href = "index.html?p=" + (idx + 1);
							}
							pagerContainer.appendChild(lnk);
						}
						
					} else if (window.pagerType == "2") {	// Year
						var pageItem = window.pageData[idx];
						if (idx == currentPage) {
							var spn = document.createElement('span');
							spn.className = "pager";
							spn.innerText = pageItem.year;
							pagerContainer.appendChild(spn);
						} else {
							var lnk = document.createElement('a');
							lnk.className = "pager";
							lnk.innerText = pageItem.year;
							lnk.href = "index.html?p=" + pageItem.page;
							pagerContainer.appendChild(lnk);
						}
						
					} else if (window.pagerType == "3") {	// Month
						var pageItem = window.pageData[idx];
						var text = '';
						if (prevYear != pageItem.year) {
							text = pageItem.year + "-" + pageItem.month;
							prevYear = pageItem.year;
						} else {
							text = pageItem.month;
						}

						if (idx == currentPage) {
							var spn = document.createElement('span');
							spn.className = "pager";
							spn.innerText = text;
							pagerContainer.appendChild(spn);
						} else {

							var lnk = document.createElement('a');
							lnk.className = "pager";
							lnk.innerText = text;
							lnk.href = "index.html?p=" + pageItem.page;
							pagerContainer.appendChild(lnk);
						}
					} else {
					
					}
				}
			}
			else if (asyncLoadingType == "onscroll")
			{
				window.addEventListener('scroll', function(e)
				{
					if (window.loadingMoreMsgs)
					{
						return;
					}
					if (window.wechatMsgsIndexes.length == 0)
					{
						return;
					}

					if (!checkScrollDirectionIsUp(e))
					{
						var containerDiv = document.querySelector("#msgs-div");
						var containerDivOffset = containerDiv.offsetTop + containerDiv.clientHeight;

						var pageOffset = window.pageYOffset + window.innerHeight;

						if(pageOffset > containerDivOffset - 20)
						{
							window.loadingMoreMsgs = true;
							if (window.numberOfMsgsToLoad <= 0) window.numberOfMsgsToLoad = window.sizeOfMsgPage;
							loadMsgsForNextPage();
						}
					}
				}, {passive: true});

			}
		}
  		
		(function() {
		  	window.addEventListener('load', function (e) {
				initWechatPage();
				}, false);
		})();

		

		</script>
	</head>
	<body uid="%%USRNAME%%" sid="%%SESSION_USRNAME%%">
		<div class="main">
			<div class="header">
				<span class="sname">%%DISPLAYNAME%%</span>
				<div class="msgfilter">
					<!-- filter.html -->
%%HEADER_FILTER%%
				</div>
			</div>
			<div class="msgs" id="msgs-div">
%%BODY%%
			</div>
			<br />
			<div id="footer" class="footer">
				<div id="pager" class="pager">
					
				</div>
			</div>
		</div>

  	</body>

		<script >

			!function(e){var t=function(u,D,f){"use strict";var k,H;if(function(){var e;var t={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",fastLoadedClass:"ls-is-cached",iframeLoadMode:0,srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:true,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:true,ricTimeout:0,throttleDelay:125};H=u.lazySizesConfig||u.lazysizesConfig||{};for(e in t){if(!(e in H)){H[e]=t[e]}}}(),!D||!D.getElementsByClassName){return{init:function(){},cfg:H,noSupport:true}}var O=D.documentElement,i=u.HTMLPictureElement,P="addEventListener",$="getAttribute",q=u[P].bind(u),I=u.setTimeout,U=u.requestAnimationFrame||I,o=u.requestIdleCallback,j=/^picture$/i,r=["load","error","lazyincluded","_lazyloaded"],a={},G=Array.prototype.forEach,J=function(e,t){if(!a[t]){a[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")}return a[t].test(e[$]("class")||"")&&a[t]},K=function(e,t){if(!J(e,t)){e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)}},Q=function(e,t){var a;if(a=J(e,t)){e.setAttribute("class",(e[$]("class")||"").replace(a," "))}},V=function(t,a,e){var i=e?P:"removeEventListener";if(e){V(t,a)}r.forEach(function(e){t[i](e,a)})},X=function(e,t,a,i,r){var n=D.createEvent("Event");if(!a){a={}}a.instance=k;n.initEvent(t,!i,!r);n.detail=a;e.dispatchEvent(n);return n},Y=function(e,t){var a;if(!i&&(a=u.picturefill||H.pf)){if(t&&t.src&&!e[$]("srcset")){e.setAttribute("srcset",t.src)}a({reevaluate:true,elements:[e]})}else if(t&&t.src){e.src=t.src}},Z=function(e,t){return(getComputedStyle(e,null)||{})[t]},s=function(e,t,a){a=a||e.offsetWidth;while(a<H.minSize&&t&&!e._lazysizesWidth){a=t.offsetWidth;t=t.parentNode}return a},ee=function(){var a,i;var t=[];var r=[];var n=t;var s=function(){var e=n;n=t.length?r:t;a=true;i=false;while(e.length){e.shift()()}a=false};var e=function(e,t){if(a&&!t){e.apply(this,arguments)}else{n.push(e);if(!i){i=true;(D.hidden?I:U)(s)}}};e._lsFlush=s;return e}(),te=function(a,e){return e?function(){ee(a)}:function(){var e=this;var t=arguments;ee(function(){a.apply(e,t)})}},ae=function(e){var a;var i=0;var r=H.throttleDelay;var n=H.ricTimeout;var t=function(){a=false;i=f.now();e()};var s=o&&n>49?function(){o(t,{timeout:n});if(n!==H.ricTimeout){n=H.ricTimeout}}:te(function(){I(t)},true);return function(e){var t;if(e=e===true){n=33}if(a){return}a=true;t=r-(f.now()-i);if(t<0){t=0}if(e||t<9){s()}else{I(s,t)}}},ie=function(e){var t,a;var i=99;var r=function(){t=null;e()};var n=function(){var e=f.now()-a;if(e<i){I(n,i-e)}else{(o||r)(r)}};return function(){a=f.now();if(!t){t=I(n,i)}}},e=function(){var v,m,c,h,e;var y,z,g,p,C,b,A;var n=/^img$/i;var d=/^iframe$/i;var E="onscroll"in u&&!/(gle|ing)bot/.test(navigator.userAgent);var _=0;var w=0;var M=0;var N=-1;var L=function(e){M--;if(!e||M<0||!e.target){M=0}};var x=function(e){if(A==null){A=Z(D.body,"visibility")=="hidden"}return A||!(Z(e.parentNode,"visibility")=="hidden"&&Z(e,"visibility")=="hidden")};var W=function(e,t){var a;var i=e;var r=x(e);g-=t;b+=t;p-=t;C+=t;while(r&&(i=i.offsetParent)&&i!=D.body&&i!=O){r=(Z(i,"opacity")||1)>0;if(r&&Z(i,"overflow")!="visible"){a=i.getBoundingClientRect();r=C>a.left&&p<a.right&&b>a.top-1&&g<a.bottom+1}}return r};var t=function(){var e,t,a,i,r,n,s,o,l,u,f,c;var d=k.elements;if((h=H.loadMode)&&M<8&&(e=d.length)){t=0;N++;for(;t<e;t++){if(!d[t]||d[t]._lazyRace){continue}if(!E||k.prematureUnveil&&k.prematureUnveil(d[t])){R(d[t]);continue}if(!(o=d[t][$]("data-expand"))||!(n=o*1)){n=w}if(!u){u=!H.expand||H.expand<1?O.clientHeight>500&&O.clientWidth>500?500:370:H.expand;k._defEx=u;f=u*H.expFactor;c=H.hFac;A=null;if(w<f&&M<1&&N>2&&h>2&&!D.hidden){w=f;N=0}else if(h>1&&N>1&&M<6){w=u}else{w=_}}if(l!==n){y=innerWidth+n*c;z=innerHeight+n;s=n*-1;l=n}a=d[t].getBoundingClientRect();if((b=a.bottom)>=s&&(g=a.top)<=z&&(C=a.right)>=s*c&&(p=a.left)<=y&&(b||C||p||g)&&(H.loadHidden||x(d[t]))&&(m&&M<3&&!o&&(h<3||N<4)||W(d[t],n))){R(d[t]);r=true;if(M>9){break}}else if(!r&&m&&!i&&M<4&&N<4&&h>2&&(v[0]||H.preloadAfterLoad)&&(v[0]||!o&&(b||C||p||g||d[t][$](H.sizesAttr)!="auto"))){i=v[0]||d[t]}}if(i&&!r){R(i)}}};var a=ae(t);var S=function(e){var t=e.target;if(t._lazyCache){delete t._lazyCache;return}L(e);K(t,H.loadedClass);Q(t,H.loadingClass);V(t,B);X(t,"lazyloaded")};var i=te(S);var B=function(e){i({target:e.target})};var T=function(e,t){var a=e.getAttribute("data-load-mode")||H.iframeLoadMode;if(a==0){e.contentWindow.location.replace(t)}else if(a==1){e.src=t}};var F=function(e){var t;var a=e[$](H.srcsetAttr);if(t=H.customMedia[e[$]("data-media")||e[$]("media")]){e.setAttribute("media",t)}if(a){e.setAttribute("srcset",a)}};var s=te(function(t,e,a,i,r){var n,s,o,l,u,f;if(!(u=X(t,"lazybeforeunveil",e)).defaultPrevented){if(i){if(a){K(t,H.autosizesClass)}else{t.setAttribute("sizes",i)}}s=t[$](H.srcsetAttr);n=t[$](H.srcAttr);if(r){o=t.parentNode;l=o&&j.test(o.nodeName||"")}f=e.firesLoad||"src"in t&&(s||n||l);u={target:t};K(t,H.loadingClass);if(f){clearTimeout(c);c=I(L,2500);V(t,B,true)}if(l){G.call(o.getElementsByTagName("source"),F)}if(s){t.setAttribute("srcset",s)}else if(n&&!l){if(d.test(t.nodeName)){T(t,n)}else{t.src=n}}if(r&&(s||l)){Y(t,{src:n})}}if(t._lazyRace){delete t._lazyRace}Q(t,H.lazyClass);ee(function(){var e=t.complete&&t.naturalWidth>1;if(!f||e){if(e){K(t,H.fastLoadedClass)}S(u);t._lazyCache=true;I(function(){if("_lazyCache"in t){delete t._lazyCache}},9)}if(t.loading=="lazy"){M--}},true)});var R=function(e){if(e._lazyRace){return}var t;var a=n.test(e.nodeName);var i=a&&(e[$](H.sizesAttr)||e[$]("sizes"));var r=i=="auto";if((r||!m)&&a&&(e[$]("src")||e.srcset)&&!e.complete&&!J(e,H.errorClass)&&J(e,H.lazyClass)){return}t=X(e,"lazyunveilread").detail;if(r){re.updateElem(e,true,e.offsetWidth)}e._lazyRace=true;M++;s(e,t,r,i,a)};var r=ie(function(){H.loadMode=3;a()});var o=function(){if(H.loadMode==3){H.loadMode=2}r()};var l=function(){if(m){return}if(f.now()-e<999){I(l,999);return}m=true;H.loadMode=3;a();q("scroll",o,true)};return{_:function(){e=f.now();k.elements=D.getElementsByClassName(H.lazyClass);v=D.getElementsByClassName(H.lazyClass+" "+H.preloadClass);q("scroll",a,true);q("resize",a,true);q("pageshow",function(e){if(e.persisted){var t=D.querySelectorAll("."+H.loadingClass);if(t.length&&t.forEach){U(function(){t.forEach(function(e){if(e.complete){R(e)}})})}}});if(u.MutationObserver){new MutationObserver(a).observe(O,{childList:true,subtree:true,attributes:true})}else{O[P]("DOMNodeInserted",a,true);O[P]("DOMAttrModified",a,true);setInterval(a,999)}q("hashchange",a,true);["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){D[P](e,a,true)});if(/d$|^c/.test(D.readyState)){l()}else{q("load",l);D[P]("DOMContentLoaded",a);I(l,2e4)}if(k.elements.length){t();ee._lsFlush()}else{a()}},checkElems:a,unveil:R,_aLSL:o}}(),re=function(){var a;var n=te(function(e,t,a,i){var r,n,s;e._lazysizesWidth=i;i+="px";e.setAttribute("sizes",i);if(j.test(t.nodeName||"")){r=t.getElementsByTagName("source");for(n=0,s=r.length;n<s;n++){r[n].setAttribute("sizes",i)}}if(!a.detail.dataAttr){Y(e,a.detail)}});var i=function(e,t,a){var i;var r=e.parentNode;if(r){a=s(e,r,a);i=X(e,"lazybeforesizes",{width:a,dataAttr:!!t});if(!i.defaultPrevented){a=i.detail.width;if(a&&a!==e._lazysizesWidth){n(e,r,i,a)}}}};var e=function(){var e;var t=a.length;if(t){e=0;for(;e<t;e++){i(a[e])}}};var t=ie(e);return{_:function(){a=D.getElementsByClassName(H.autosizesClass);q("resize",t)},checkElems:t,updateElem:i}}(),t=function(){if(!t.i&&D.getElementsByClassName){t.i=true;re._();e._()}};return I(function(){H.init&&t()}),k={cfg:H,autoSizer:re,loader:e,init:t,uP:Y,aC:K,rC:Q,hC:J,fire:X,gW:s,rAF:ee}}(e,e.document,Date);e.lazySizes=t,"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:{});
		</script>
</html>
